<template>
  <div class="comment" id="comment">
    <div v-if="totalNum" class="title">评论<span class="count">（{{ totalNum }}）</span></div>
    <div v-if="enableComment" class="box">
      <img src="@/assets/placeholder.png" class="avatar" />
      <input type="text" class="input" placeholder="说点什么吧">
      <van-button size="small" :color="rootThemeColor" @click="postComment">发表</van-button>
    </div>
    <van-loading v-if="!hasComments && showLoading" class="loading" :color="rootThemeColor" type="spinner">加载中...</van-loading>
    <div v-if="hasComments" class="comment-list">
      <comment-item
        v-for="item in comments"
        :key="item.rpid"
        :comment="item"
        @getMoreReply="toMoreComment"
      />
    </div>
    <van-popup
      :class="popupClass"
      :popup-style="popupStyle"
      :show.sync="moreShow"
    >
      <comment-reply
        :comment="currentComment"
      />
    </van-popup>
  </div>
</template>

<script>
import { Loading as VanLoading, Button as VanButton, Toast } from 'vant'
import CommentItem from './CommentItem.vue'
import CommentReply from './CommentReply.vue'
import VanPopup from '@/components/popup/Popup.vue'
export default {
  name: 'Comment',
  inject: ['rootThemeColor'],
  components: {
    VanLoading,
    CommentItem,
    CommentReply,
    VanPopup,
    VanButton
  },
  props: {
    // 评论数据 不包括全部的
    comments: {
      type: Array
    },
    // 评论总数
    totalNum: {
      type: Number
    },
    // 是否允许评论
    enableComment: {
      type: Boolean,
      default: true
    },
    popupStyle: {
      type: Object
    },
    popupClass: {
      type: String
    },
    showLoading: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      moreShow: false,
      currentComment: null
    }
  },
  computed: {
    hasComments () {
      return this.comments.length > 0
    }
  },
  methods: {
    // 发表评论
    postComment () {
      // TODO:发表评论
      Toast('功能开发中，请稍候...')
    },
    // 获取更多评论数据
    toMoreComment (item) {
      // const { oid, rpid, type } = item
      this.currentComment = item
      this.moreShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .loading{
    display: flex;
    justify-content: center;
  }
  .comment{
    position: relative;
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    .title{
      height: rem(43px);
      line-height: rem(43px);
      font-size: rem(16px);
      color: $color-text-primary;
      .count{
        color: $color-text-secondary;
      }
    }
    .box{
      display: flex;
      align-items: center;
      margin-top: rem(6px);
      .avatar{
        display: block;
        width: rem(25px);
        height: rem(25px);
        padding: rem(5px);
        border-radius: 50%;
        background-color: $color-grey;
      }
      .input{
        flex: 1;
        margin: {
          left: rem(10px);
          right: rem(10px);
        };
        height: rem(35px);
        padding-left: rem(10px);
        background-color: $color-grey;
        border-radius: rem(15px);
        font-size: rem(14px);
        color: silver;
        border: 0;
      }
    }
    &-more{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background-color: $color-white;
      transform: translate3d(0, 100%, 0);
      transition: transform .3s ease;
      &.active{
        transform: translate3d(0, 0, 0);
      }
    }
  }
  @media screen and (orientation:portrait) {
    .bpopup{
      top: rem(255px)
    }
  }
</style>
